import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import { InlineCode } from '~/components/text/code'
import { Image } from '~/components/media'
import Caption from '~/components/text/caption'
import Link from '~/components/text/link'

export const meta = {
  title: 'Setup a Namecheap Domain with ZEIT Now',
  description:
    'Use your Namecheap registered domain for your ZEIT Now deployments.',
  published: '2019-02-15T17:00:00.860Z',
  authors: ['unicodeveloper'],
  url: '/guides/setup-namecheap-domain-now',
  editUrl: 'pages/guides/setup-namecheap-domain-now.mdx',
  lastEdited: '2020-01-24T23:33:43.000Z'
}

In this guide, we will cover how to use your Namecheap registered domain as a production domain for your ZEIT Now deployments.

## Step 1: Adding and Verifying Your Domain

First, you need to add your Namecheap registered domain to your ZEIT account. To get started, use the [Now CLI](/docs/v2/getting-started/installation#now-cli):

<Snippet dark text="now domains add <domain>" />

The command above adds the domain to your ZEIT account. Once it has been added, the [Now CLI](/docs/v2/getting-started/installation#now-cli) outputs some information needed to verify ownership of the domain.

There are two options available for domain verification:

- Verify with Nameservers.
- Verify with TXT record.

The [**Verify with TXT record**](#txt-record-verification) ensures a smooth [zero-downtime](/guides/zero-downtime-domain-migration/) migration.

<Image
  src={`${process.env.ASSETS}/guides/setup-namecheap-domain-now/add-domain-with-nowcli.png`}
  width={1852/2.5}
  height={1182/2.5}
  oversize
/>
<Caption style={{marginTop: '-64px'}}>Adding a domain with Now CLI.</Caption>

### Nameservers Verification

If you want to opt for verifying your domains with Nameservers, you must use the nameservers listed when you added a domain via the Now CLI. The upside to verifying with Nameservers is that you are verifying and pointing to ZEIT Now at once.

Use the following command to list the set of nameservers needed for verification:

<Snippet dark text="now domains inspect <domain>" />

<Image
  src={`${process.env.ASSETS}/guides/setup-namecheap-domain-now/inspect-domain.png`}
  width={1852/2.5}
  height={1648/2.5}
  oversize
/>
<Caption style={{marginTop: '-64px'}}>Inspect a domain with Now CLI.</Caption>

Now, head over to [namecheap.com](https://www.namecheap.com), log in and click on **Domain List**.

<Image
  src={`${process.env.ASSETS}/guides/setup-namecheap-domain-now/domain-list.png`}
  width={2396/2.5}
  height={1629/2.5}
  oversize
/>
<Caption style={{marginTop: '-64px'}}>Namecheap Domains List Page.</Caption>

Next, click on the **Manage** button on the domain you want to migrate to ZEIT Now as indicated by the arrow in the image above.

In the page you are directed to, scroll down to the **NAMESERVERS** section, click on the dropdown form and select **CustomDNS** as shown in the illustration below:

<Image
  src={`${process.env.ASSETS}/guides/setup-namecheap-domain-now/custom-nameservers.png`}
  width={2396/2.5}
  height={1629/2.5}
  oversize
/>
<Caption style={{marginTop: '-64px'}}>Dropdown for selecting the Custom DNS option.</Caption>

Add the intended nameservers gotten from running the inspect command to the **Custom DNS** form in the order they are given and save the configuration.

Once Namecheap is done propagating the newly changed DNS for your domain, then your domain is ready to be verified. ZEIT automatically checks the domain for verification. However, if you are keen on manually verifying it, then run the following command:

<Snippet dark text="now domains verify <domain>" />

### TXT Record Verification

This option is great if you intend to verify your domain, but not point to ZEIT Now yet!

In your Namecheap **Domain List** dashboard, on the domain you want to migrate, click on the **Advanced DNS** tab. Now, scroll down to the **Host Records** section, and click on the **Add New Record** button.

Select `TXT Record` as the record type, add `_now` as the host, and the value you were given for the record when adding your domain. You can fetch the value again using the `now domains inspect <domain>` via the [Now CLI](/docs/v2/getting-started/installation#now-cli).

<Image
  src={`${process.env.ASSETS}/guides/setup-namecheap-domain-now/txtrecord.png`}
  width={2396/2.5}
  height={1629/2.5}
  oversize
/>
<Caption style={{marginTop: '-64px'}}> Adding a TXT record with Namecheap's domain Advanced DNS settings. </Caption>

Your domain will be verified after adding the TXT record. Once ZEIT verifies your domain, you'll automatically receive an email. You can also manually use the command below to force a domain verification:

<Snippet dark text="now domains verify <domain>" />

## Step 2: Configuring your Domain on ZEIT Now

Once your domain has been verified on ZEIT Now, you can configure your domain with DNS records and add it as a production domain for deployments.

### Adding DNS Records

ZEIT Now provides an easy to use command that allows you to add DNS records from the CLI. In this example, you can configure your domain with a set of Gmail MX records via the `now dns add` command:

```
now dns add <domain> @ MX ASPMX.L.GOOGLE.COM 1
now dns add <domain> @ MX ALT1.ASPMX.L.GOOGLE.COM 5
now dns add <domain> @ MX ALT2.ASPMX.L.GOOGLE.COM 5
now dns add <domain> @ MX ALT3.ASPMX.L.GOOGLE.COM 10
now dns add <domain> @ MX ALT4.ASPMX.L.GOOGLE.COM 10
```

Learn more about using the [`now dns`](/docs/now-cli#commands/dns) command.

### Adding a Domain to Deployments

ZEIT Now is dedicated to making deployment easy. If you have not yet deployed an app, take a look at the [Deployment Basics](/docs/v2/deployments/basics) documentation or at some other [guides](/guides) or [examples](/examples) to get started.

Adding your production domain to a project can be done from the [ZEIT Dashboard](/dashboard) by selecting the project's **Domains** tab and entering it there, you can find more information on this in the [custom domains documentation](/docs/v2/custom-domains/#adding-a-domain).

You can then deploy to your production domain with **a single command**:

<Snippet dark text="now --prod" />
<Caption>Deploying a project to a production domain.</Caption>

We highly recommend using either the [ZEIT Now for GitHub](/docs/v2/git-integrations/zeit-now-for-github), [ZEIT Now for GitLab](/docs/v2/git-integrations/zeit-now-for-gitlab), or [ZEIT Now for Bitbucket](/docs/v2/git-integrations/zeit-now-for-bitbucket) apps which will allow your app to be deployed to your production on push to your GitHub repository, GitLab project, or Bitbucket repository.

## Step 3: Pointing to ZEIT Now

If you already verified your domain with nameservers, then this step is done.

The final step of migrating your domain to ZEIT Now is to point your domain to ZEIT DNS with the intended nameservers set. Using `now domains inspect <domain>`, you can always find the intended nameservers to use with your domain.

Once Namecheap's propagation of the updated nameservers is complete, your domain will automatically point to the [app you deployed](#adding-a-domain-to-deployments) before.

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
